<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" 
    xmlns:j="jelly:core" 
    xmlns:g="glide" 
    xmlns:j2="null" 
    xmlns:g2="null">

    <!--
   *****************************************************
   ****************** Start of Styles ******************
   *****************************************************
  -->

    <!-- Leaflet CSS fm_leaflet.1.3.4.css-->
    <link href="7583844cdb5623002331880948961910.cssdbx?" rel="stylesheet" type="text/css"/>

    <!-- Floor_DXF Converter CSS-->
    <link href="251e6fb7db062300233188094896194a.cssdbx?" rel="stylesheet" type="text/css"/>

    <!-- jQueryUI_v1.11.4 CSS -->
    <link href="8c743e650f1aea0011bec3ace1050e91.cssdbx?" rel="stylesheet" type="text/css"/>

    <!-- Angular fm_angular-ui_ui-select CSS-->
    <link href="7941bfb7db06230023318809489619c0.cssdbx?" rel="stylesheet" type="text/css"/>


    <!--
   *****************************************************
   ************* Start of Librarie Includes ************
   *****************************************************
  -->

    <g:requires name="x_lsmcb_fm.fm_angular.1.4.9.min.jsdbx"/>
    <g:requires name="x_lsmcb_fm.fm_angular_sanitize.min.jsdbx"/>

    <!-- Get the values from dialog preferences -->
    <j:set var="jvar_recordId" value="${JS,HTML:sys_id}"/>
	
    <!--
   *****************************************************
   ************* Layout ************
   *****************************************************
  -->
	
    <div ng-app="dxf2svg" ng-controller="SVGConverterController" class="ng-scope" style="margin-left:-5px; margin-right:-5px;"  onload="window.resizeTo(640,480)">
		<div id="overlayC">
			<div class="container-fluid" style="position:relative;top:40%;">
				<div class="row">
					<div class="col-xs-12" style="text-align:center">
						<div id="text">Converting...</div>
					</div>
					<div class="col-xs-12" style="text-align:center">
						<div class="loader" style="display: inline-block"></div>
					</div>
				</div>
			</div>
		</div>
		<div id="overlayS">
			<div class="container-fluid" style="position:relative;top:40%;">
				<div class="row">
					<div class="col-xs-12" style="text-align:center">
						<div id="text">Saving...</div>
					</div>
					<div class="col-xs-12" style="text-align:center">
						<div class="loader" style="display: inline-block"></div>
					</div>
				</div>
			</div>
		</div>
        <div border="0" cellspacing="0" cellpadding="0" width="100%">
            <div valign="top">
                <div class="ng-scope" style="top:0px; margin-top:-5px;">
                    <div border="0" cellspacing="0" cellpadding="0" class="panel panel-default">
                        <div class="panel-heading">
                            <div class="form_title">${gs.getMessage("fm_floor_DXF_converter")}</div>
                        </div>
                        <div class="panel-body">
                            <div class="container-fluid">
                                <div class="row">
                                    <div class="col-xs-12">
                                        <div class="form-inline">
                                            <div class="form-group input-append">
                                                <div class="bigSpacer">
                                                    <span class="input-group lightweight-reference inline-form">
                                                        <div>
                                                            <p style="font-size:17px;">
                                                                <span style="padding-right:5px; ">⬈</span>${gs.getMessage("fm_choose_file")}</p>
                                                            <div class="upload-field" ng-click="">
                                                                <span style="padding:10px; font-size:15px; text-align: center;">Import File</span>
                                                                <input id="input-file-chooser" type="file"></input>
                                                            </div>
                                                        </div>
                                                    </span>
                                                </div>
                                            </div>
                                            <div class="form-group input-append">
                                                <div class="bigSpacer">
                                                    <span class="input-group lightweight-reference inline-form">

                                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="container-fluid">	
            <div class="row" style="margin:auto;">
                <div class="col-xs-9">
                    <div id="map"></div>
                </div>
                <div class="col-xs-3">
                    <div class="row" style="margin-bottom: 1em; min-width:100px; position: relative;">
                        <div class="container-fluid" >
                            <div class="row" >
                                <div class="col-xs-4" style="display: inline-block; margin: 1em;">
                                    <button class="btn" style="width:100%; margin: 1em 0 1em 0; min-width: 80px;" ng-click="saveFile()" ng-disabled="data.selectedLayersList.length == 0">${gs.getMessage("fm_saveSvg")}</button>
                                </div>
                                <div class="col-xs-4" style="display: inline-block; margin: 1em;">
                                    <button class="btn-default" style="width:100%; margin: 1em 0 1em 0; min-width: 80px; border-radius:3px;" onClick="window.history.back()">Return</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div >
                        <div class="room_properties">
                            <div>
                                <p style="font-size:17px; ">
                                    <span style="padding-right:5px">☰</span>${gs.getMessage("fm_choose_layers")}</p>
                                <ul ng-show="data.selectedLayersList"  class="spacer list-group" style="margin:auto; ">
                                    <li>
                                        <div class="container-fluid">
                                            <div class="row" sytle="display: inline-form; width: 100%;">
                                                <div class="col-xs-9 right_column">
                                                    <ui-select ng-model="data.tempFile" theme="select2" style="width: 130%; min-width:90px; height: 100%; margin: auto;" ng-change="addSelectLayers()">
                                                        <ui-select-match placeholder="Choose layer">
                                                            Layers:    {{$select.selected.name}}
                                                        </ui-select-match>
                                                        <ui-select-choices repeat="convert in convertedFileLayers | filter: $select.search">
                                                            <div ng-bind-html="convert.name | highlight: $select.search"/>
                                                        </ui-select-choices>
                                                    </ui-select>
                                                    <ul ng-show="data.selectedLayersList" style="border: none; width: 100%; min-width: 100px; margin: 0px; overflow: auto;padding: 0px;">
                                                        <li ng-repeat="presentLayer in data.selectedLayersList" style="padding:0px; margin:10px;overflow: auto">
                                                            <span ng-click="clear($index)" style="margin:8px; cursor: pointer; " width= "50%">❎
                                                            </span>
                                                            <span>{{presentLayer.name}}</span>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!--
  *****************************************************
  ************* Starting scripts  *********************
  *****************************************************
 -->
    <g:requires name="x_lsmcb_fm.fm_angular_ui-select.jsdbx"/>
    <g:requires name="x_lsmcb_fm.fm_room_res_init_service.jsdbx" />
    <g:requires name="x_lsmcb_fm.jquery3.2.1.jsdbx" />
    <g:requires name="x_lsmcb_fm.PathArrayToSvg.jsdbx" />
    <g:requires name="x_lsmcb_fm.svg_pathSeg_api.jsdbx" />
    <g:requires name="x_lsmcb_fm.positional_format.jsdbx" />
    <g:requires name="x_lsmcb_fm.dxf_svg_converter.jsdbx" />
    <g:requires name="x_lsmcb_fm.fm_floorDXF_controller.jsdbx" />
    <g:requires name="x_lsmcb_fm.fm_leaflet.1.3.4.js.jsdbx" />

</j:jelly>